<template>
    <div class="header">
        <el-form :model="dataForm" class="login-div" label-width="80px" :rules="dataRule" :label-position="labelPosition" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item label="手机号" prop="userName">
                <el-input prefix-icon="iconfont iconwo" @blur="onBlur()" v-model="dataForm.userName" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <!-- 改为selete组件 让 客户选择来进行登录的哪个公司 -->
            <el-form-item label="公司名称" v-show="isCompanies" prop="selectedCompany">
              <el-select v-model="dataForm.selectedCompany"  value-key="id" placeholder="请选择公司名称" ref="sel">
                 <el-option
                   v-for="item in componies"
                   :key="item.id"
                   :label="item.deptName"
                   :value="item">
                  <!-- <svg-icon :icon-class="item.label" style="float: left;height:100%;" /> -->
                  <!-- <span style="float: right; color: #8492a6;">{{ item.value }}</span> -->
                 </el-option>
                 </el-select>
                <!-- <el-input prefix-icon="iconfont iconcompany" v-model="dataForm.orgName" placeholder="请输企业名称"></el-input> -->
            </el-form-item>
            <!-- 密码为上面selete 组件选中的公司下面的的密码 -->
            <el-form-item label="密码" prop="password">
                <el-input prefix-icon="iconfont iconmima" v-model="dataForm.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
<!--            <el-form-item label="验证码" prop="captcha">
                <el-row :gutter="20">
                    <el-col class="col-gutter" :span="13">
                        <el-input prefix-icon="iconfont iconverify-fill" v-model="dataForm.captcha" placeholder="请输入验证码"></el-input>
                    </el-col>
                    <el-col :span="10" class="login-captcha">
                        <img :src="captchaPath" @click="getCaptcha()" alt="">
                    </el-col>
                </el-row>
            </el-form-item>-->
            <el-form-item>
             <div class="line"><a href="#" @click="recover">忘记密码？</a></div>
            </el-form-item>
            <el-form-item>
                <el-button class="login-btn-submit" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
            <el-form-item>
              <div class="register-r">还没账号 ？ <a href="#" @click="registerEdit()">去注册</a></div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  import { getUUID } from '@/utils'
  export default {
    props: {
      showLogin: Boolean
    },
    watch: {
      componies: {
        deep: true,
        handler (val) {
          if (val.length > 1) {
            this.isCompanies = true
          } else {
            this.isCompanies = false
          }
        }
      }
    },
    data () {
      return {
        isCompanies: false,
        labelPosition: 'right',
        dataForm: {
          orgName: '',
          userName: '',
          password: '',
          uuid: '',
          captcha: '',
          deptId: '',
          selectedCompany: {}
        },
        dataRule: {
          selectedCompany: [
            { required: true, message: '企业名称不能为空', trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]/*,
          captcha: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ] */
        },
        captchaPath: '',
        componies: []
      }
    },
    created () {
      this.getCaptcha()
    },
    methods: {
      // 失去焦点触发
      onBlur () {
        this.$http({
          url: this.$http.adornUrl('/sys/login/getTenantList/' + this.dataForm.userName),
          method: 'post'
        }).then(res => {
          console.log(res)
          this.componies = res.data
          if (res.data.length) this.dataForm.selectedCompany = res.data[0]
        })
      },
      // 提交表单
      dataFormSubmit () {
        // console.log(this.componies)
        if (this.componies.length < 1) {
          this.$message.error('账号或者密码错误')
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'orgName': this.dataForm.selectedCompany.deptName,
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha,
                'tenantId': this.dataForm.selectedCompany.deptId
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.$router.push({ name: 'home' })
              } else {
                this.getCaptcha()
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/captcha?uuid=${this.dataForm.uuid}`)
      },
      recover () {
        this.$emit('refreshShowLogin', false)
        // this.$emit('architecture', false)
      },
      registerEdit () {
        this.$emit('registerLogin')
      }
    }
  }
</script>
<style lang="scss">
    .login-div {
      padding-left: 50px;
      padding-right: 60px;
    }
    .login-title {
      font-size: 16px;
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .header {
        margin-top:50px;
        width:100%;
    }
    // 按钮颜色
    .login-btn-submit {
      color: #ffffff;
      width: 100%;
      background-color:#409EFF;
      border-color:#409EFF;
      margin-top: 26px !important;
    }
    .login-btn-submit:hover{
      color: #fff;
      background-color:#409EFF;
      border-color:#409EFF;
    }
    .el-select--medium{
      width: 100%;
    }
    .login-btn-submit:active{
      color: #fff;
      background-color:#409EFF;
      border-color:#409EFF;
    }
    .line{
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    display: flex;
    justify-content: end;
    align-items: center;
    a {
      color: #999999;
    }
    }
    .register-r{
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #999999;
      a {
      color: #409EFF;
    }
    }
    .col-gutter{
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
</style>
